<template>
    <div class="city">
        <div class="head">
            <router-link to="/"><span class="iconfont icon-chevron-thin-left sp1"></span></router-link>
            <p class="p1">选择城市</p>
        </div>
        <div class="cen">
            <p class="p2">请根据您的收货地址选择地区</p>
            <div class="fa">
                <span class="iconfont icon-fangdajing sp2"></span>
                <input type="text" placeholder="搜索">
                <span class="iconfont icon-quxiao sp3"></span>
            </div>
        </div>

        <van-index-bar>
            <van-index-anchor index="A" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />

            <van-index-anchor index="B" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />

             <van-index-anchor index="C" />
                <van-cell title="文本" />
                <van-cell title="文本" />
                <van-cell title="文本" />
           
        </van-index-bar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            indexList: [""],
        };
    },
}
</script>

<style scoped>
    .city{
        position: relative;
        font-size: 0.12rem;
    }
    .sp1{
        position: absolute;
        left: 0.1rem;
        color: red;
        font-size: 0.2rem;
    }
    .p1{
        font-size: 0.16rem;
    }
    .cen{
        background-color:rgb(236, 236, 236);
        box-sizing: border-box;
        padding: 0.1rem;
    }
    .p2{
        color: red;
    }
    .fa{
        border: 1px solid #ddd;
        width: 90%;
        margin: 0 auto;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }
    input{
        border: none;
        outline: none;
        width: 100%;
        height: 0.2rem;
        text-indent: 0.26rem;
    }
    .sp2,.sp3{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.14rem;
        color: gray;
    }
    .sp2{
        left: 0.05rem;
    }
    .sp3{
        right: 0.1rem;
    }
</style>